<template>
  <div id="home">
    <div class="home_logo">
      <div class="logo">
        <img src="../image/矢量智能对象.png" alt="" />
      </div>
      <div class="denglu">
        <img src="../image//欢迎登陆北京金飞鹰APP管理系统.png" alt="" />
      </div>
      <div class="yf">
        <img
          src="../image/金飞鹰科技以行业应用系统开发为主要的高科技软件企业.png"
          alt=""
        />
      </div>
    </div>

    <div class="home_background">
      <span class="back">
        <img src="../image/形状 1 拷贝.png" height="80%" alt=""
      /></span>
      <div class="z2">
        <img src="../image//组 2.png" alt="" />
      </div>
      <div class="z3">
        <img src="../image//组 3 拷贝 2.png" alt="" />
      </div>
      <div class="dn">
        <img src="../image//电脑.png" alt="" />
      </div>
      <div class="z31">
        <img src="../image//组 31 拷贝.png" alt="" />
      </div>
      <div class="z39">
        <img src="../image//组 39.png" alt="" />
      </div>
      <div class="x3">
        <img src="../image//矢量智能对象3.png" alt="" />
      </div>
      <div class="k6">
        <img src="../image//组 3 拷贝.png" alt="" />
      </div>
      <div class="dixian">
        <img src="../image//组 4.png" alt="" />
      </div>
      <div class="zbd">
        <img src="../image//组 3.png" alt="" />
      </div>
      <div class="z42">
        <img src="../image//组 42.png" alt="" />
      </div>
      <div class="zu3">
        <img src="../image//组 3 拷贝.png" alt="" />
      </div>
      <div class="zu41">
        <img src="../image//组 41.png" alt="" />
      </div>
      <div class="zu33">
        <img src="../image//组 33.png" alt="" />
      </div>
      <div class="zu400">
        <img src="../image//组 400.png" alt="" />
      </div>
    </div>

    <div id="login">
      <div class="loginToHome">
        <!-- <RandomCodeProduce class="RandomCodeProduce"></RandomCodeProduce> -->
        <s-identify class="yanzhengma " :identifyCode="identifyCode"></s-identify>
        <el-form
          ref="form"
          :model="form"
          :rules="ruleForm"
          status-icon
          label-width="80px"
          class="loginForm"
        >
          <h3>登陆</h3>
          <div><img src="../image//矩形 2.png" alt="" /></div>
          <el-form-item label="" prop="name">
            <el-input
              class="zh"
              type="text"
              v-model="form.name"
              auto-complete="off"
              placeholder="输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              class="text"
              type="password"
              v-model="form.password"
              auto-complete="off"
              placeholder="输入密码"
            ></el-input>
          </el-form-item>
          <el-input
            class="yzm"
            type="password"
            v-model="form.yzmword"
            auto-complete="off"
            placeholder="输入验证码"
          ></el-input>
          <el-checkbox
            id="tao"
            v-model="checked"
            class="font-16 text-green hk-cursor"
            >记住密码</el-checkbox
          >
          <el-form-item>
            <el-button
              type="primary"
              class="homeBut"
              plain
              @click="submit"
              :loading="logining"
              element-loading-text="拼命加载中"
              >登陆</el-button
            >
            <!-- <el-button -->
            <!-- class="homeBut" -->
            <!-- type="primary" -->
            <!-- plain -->
            <!-- @click="submit" -->
            <!-- :loading="logining" -->
            <!-- >登录</el-button> -->
            <!-- <el-button -->
            <!-- class="loginBut" -->
            <!-- type="primary" -->
            <!-- plain -->
            <!-- @click="resetForm()" -->
            <!-- >重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from "../components/SIdentify.vue";

// import RandomCodeProduce from "../components/RandomCodeProduce.vue";
export default {
  components: {
    SIdentify,
  },
  data() {
    return {
      logining: false,

      form: {
        name: "",
        password: "",
        yzmword: "",
      },
      ruleForm: {
        name: [{ required: false, message: "输入账号", trigger: "blur" }],
        password: [{ required: false, message: "输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submit(event) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.form.name === "admin" && this.form.password === "123456") {
            this.logining = false;
            sessionStorage.setItem("user", this.form.name);
            this.$router.push({ path: "/home" });
          } else {
            this.logining = false;
            this.$alert("您输入的密码错误,请重新输入", {
              confirmButtonText: "ok",
            });
          }
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.yanzhengma{
  position: absolute;
  top: 1.4rem;
  left: 0.5rem;
}
.yzm{
width: 2rem;

}
.el-input /deep/ .el-input__inner {
  width: 312px;
}
* {
  margin: 0;
  padding: 0;
}
.home_background {
  width: 50%;
  height: 100%;
  /* background-color: red; */
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.home_logo {
  width: 50%;
  height: 100%;
  /* background-color: pink; */
  margin-top: 30px;
  position: relative;
}
.loginToHome {
  position: absolute;
  left: 5%;
  bottom: 10%;
  width: 430px;
  height: 460px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  z-index: 5;
}
.loginForm {
  text-align: center;
  padding-top: 15px;
  padding-right: 30px;
  top: 10px;
}
.homeBut {
  width: 320px;
  font-size: 20px;
  position: absolute;
  height: 43px;
  bottom: -308px;
  left: -33px;
  background-color: #2a78ff;
  color: #d5e3ff;
}
/* .loginBut { */
/* position: absolute; */
/* right: 0px; */
/* bottom: -150px; */
/* } */
.yzm {
  position: absolute;
  left: 51px;
  top: 213px;
  width: 190px;
}
.RandomCodeProduce {
  position: absolute;
  right: -75px;
  bottom: 119px;
}
#tao {
  position: absolute;
  right: 71px;
  bottom: 165px;
}
.logo {
  position: absolute;
  left: 10%;
  top: 4%;
}
.denglu {
  position: absolute;
  left: 10%;
  top: 14%;
}
.yf {
  position: absolute;
  left: 10%;
  top: 25%;
}
#home {
  width: 100%;
  height: 100%;
  /* background-color: blue; */
  position: relative;
}
.z2 {
  position: absolute;
  right: 255px;
  bottom: 150px;
  z-index: 2;
}
.x8 {
  position: absolute;
  right: 20px;
  bottom: 391px;
}
.z3 {
  position: absolute;
  right: -9px;
  bottom: 399px;
  z-index: 2;
}
.dn {
  position: absolute;
  right: 35px;
  bottom: 465px;
  z-index: 3;
}
.z31 {
  position: absolute;
  right: 430px;
  bottom: 520px;
}
.z39 {
  position: absolute;
  right: 25px;
  bottom: 40px;
  z-index: 2;
}
.x3 {
  position: absolute;
  right: 200px;
  bottom: 40px;
  z-index: 3;
}
.t11 {
  position: absolute;
  right: 130px;
  bottom: 25px;
}
.k6 {
  position: absolute;
  right: 475px;
  bottom: 35px;
  z-index: 2;
}
.dixian {
  position: absolute;
  right: 0;
  bottom: 0;
}
.zbd {
  position: absolute;
  right: 695px;
  bottom: 20px;
}
.z42 {
  position: absolute;
  right: 795px;
  bottom: 90px;
}
.zu3 {
  position: absolute;
  right: 830px;
  bottom: 250px;
}
.zu41 {
  position: absolute;
  right: 840px;
  bottom: 277px;
}
.zu33 {
  position: absolute;
  right: 680px;
  bottom: 460px;
}
.zu400 {
  position: absolute;
  right: 720px;
  bottom: 520px;
}
div.xing1 > img {
  overflow: hidden;
  background-image: none;
}
.back {
  position: absolute;
  right: 0;
  bottom: 0;
}
.zh {
  position: absolute;
  right: 28px;
  top: 25px;
}
.text {
  position: absolute;
  right: 28px;
  top: 75px;
}
</style>
